WPF Navigation Window Control Template

After posting some LINQ posts I decided to return where I really belong, WPF…

So I was wondering on what I should experiment a bit with and I found out that there are not much resources on the Navigation Window. The Navigation window is a really cool component in WPF. Did you ever have a Page and put it as the StartupUri in the App.XAML, if yes definitely you have seen the Navigation window because by default WPF uses the Navigation Window as the parent control, for you to navigate the pages. This does not imply that you can only use the Navigation Window to navigate through the pages, you can also use the Frame control. It is important to state that the navigation work is not done by the Navigation Window, the navigation is done via the NavigationService.

In this post I am not going to talk much about how the navigation service works, I will focus on how one can create a ControlTemplate for the Navigation Window. Lets start by looking at some interesting properties of the Navigation Window. I will only mention 2 of these propertiessince we are only going to use these 2 for our ControlTemplate

Properties
– BackStack – Returns a list JournalEntryUri that represent all pages that you have a visited. Unfortunatly the JournalEntryUri is an internal class so you cannot actually cast to this type. Yet since we will use binding we will by pass this problem becuase binding works with reflection so all you need to know is the propeties that you need from this class which are the Name property (which gives you the name of the page in the BackStack) and the Source property which gives you a URI for the page.

– ForwardStack – Returns a list of JornalEntryUri that represent all pages that you have returned from by using the Back command or the NavigateJournal.

Commands (for more info on commands visit this post)
– NavigationCommands.BrowseBack
This command does not take any parameters. All you have to do is execute it or in case you are using a button (or any other controls that have the Command property) set the Command property to the NavigationCommands.BrowseBack. The Can Execute of this command will return true only if you have a page in the BackStack.

– NavigationCommands.BrowseForward
Basically this command is the the same as the BrowseBack command but it takes the navigation forward instead of backwards

– NavigationCommands.NavigateJournal
This command is used to navigate to a specific page. As a parameter this command takes a FrameworkElement that as DataContext has a JournalEntry. Yes quites strange but this is usually what you will have at hand when trying to execute the command (we will look at this later on)

Ok, so now that we are armed with some commands and properties that we can use let’s go ahead and start building our own template for a Navigation Window that has bread crumbs 🙂

Lets start off by creating a basic control template with a back and forward button…

Ok, so what we created here is basically a control template for a Navigation Window that has 2 buttons for Back and Forward. Please note that I have a ContentPresenter that has the name of PART_NavWinCP. This is very important because the Navigation Window will look for a ContentPresenter of that name in order to show the pages inside it. Another important thing that we did in the code above is to set the NavigationCommands.BrowseBack to the Command property of the back button and the same for the forward button.

Now let us create our beloved bread crumbs…

I choose to use an ItemsControl for the bread crumbs. The ItemsSource for the ItemsControl is the BackStack property of the Navigation Window since this list has all the JournalEntries. I then forced the ItemsContol to use a WrapPanel as an Items host. The important part is the DataTemplate that I am creating. Basically I a creating a button that as Commands executes the NavigationCommands.NavigateJournal command. I am passing this command the Button object itself since this button object has the journal entry as data context (the data context for the button is “set” by the data template).

As you can see it is relativly easy to create a Control Template for a Navigation Window…. I created a nicer Control Template for the Navigation Window that you can go ahead and download…

P.S There is a problem with this. The problem is that the BackStack will give you the pages in the opposite order that you would want them 🙂 so the bread crumbs would look like this

Page3 >> Page2 >> Page1

instead of this

Page1 >> Page2 >> Page3

I created my own WrapPanel so that it inverts the elements… All I had to do is open Reflector disassemble the code and change the order of the ArrangeOverride… You can find this in the download… Any questions please contant me – marlongrech@gmail.com

Have loads of WPF fun….

Downlaod Sources for sample